<template>
    <div class="editor" :class="{ 'main-transparent' : user.getPanel() === 'true' }" :id="window.getRootName() + 'EDITOR'" :style="{ width: util.toInteger(canvas.width * store.getScale()) + 'px',
        height: util.toInteger(canvas.height * store.getScale()) + 'px'}">
        <Grid :width="util.toInteger(canvas.width * store.getScale())" :height="util.toInteger(canvas.height * store.getScale())"></Grid>
        <div class="editor" :id="window.getRootName() + 'CANVAS'" :class="{ 'main-transparent' : user.getPanel() === 'true', 'select-main-transparent' : (user.getPanel() === 'true' && mapActive === 0) }" :style="{
            width: (canvas.width) + 'px',
            height: (canvas.height) + 'px',
            transform: `scale(${store.getScale()})`}" @mousedown="extentMouseDown" @contextmenu="showContext" v-Droppable="dropOpts">
            <Box v-for="(item) in elementList" v-show="getShow(item)" :element="item" :key="item.id" :id="system.SYSTEM_EDIT_BOX + item.id" :preview="preview">
                <component v-if="getIfshow(item)" :key="item.id" :is="item.component" :mode="1" :pageList="pageList" :element="item" :style="style.getElementStyle(item)" :id="system.SYSTEM_EDIT_ELEMENT + item.id" />
            </Box>
        </div>
        <Extent :box="box" />
        <Context :style="{ top: util.toInteger(menu.y * store.getScale()) + 'px', left: util.toInteger(menu.x * store.getScale()) + 'px', 'z-index': 1000001 }" />
        <div class="horizontal-line" :style="{ top: util.toInteger(location.top * store.getScale() - 2) + 'px' }"></div>
        <div class="horizontal-line" :style="{ top: util.toInteger(location.middle * store.getScale() - 2) + 'px' }"></div>
        <div class="horizontal-line" :style="{ top: util.toInteger(location.bottom * store.getScale() - 2) + 'px' }"></div>
        <div class="vertical-line" :style="{ left: util.toInteger(location.left * store.getScale() - 2) + 'px' }"></div>
        <div class="vertical-line" :style="{ left: util.toInteger(location.center * store.getScale() - 2) + 'px' }"></div>
        <div class="vertical-line" :style="{ left: util.toInteger(location.right * store.getScale() - 2) + 'px' }"></div>
    </div>
</template>

<script>
import store from '@/js/store/state.js';
import style from '@/js/util/style.js';
import util from '@/js/util/util.js';
import message from '@/js/util/message.js';
import shortcut from '@/js/main/shortcut.js';
import bus from '@/js/event/bus.js';
import status from '@/js/main/status.js';
import line from '@/js/main/line.js';
import system from '@/js/main/system.js';
import user from '@/js/util/user.js';
import vueMixin from "@/js/main/vueMixin.js";
import { mapGetters } from "vuex";

export default {
    mixins: [vueMixin],
    props: {
        preview: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        ...mapGetters(["mapActive", "toolbarId"]),
    },
    created() {},
    mounted() {
        shortcut.initialize();
        shortcut.message = function(str, type) {
            message.message(str, type);
        };
        shortcut.confirm = function(text, title, confirm, cancel) {
            return message.confirm(text, title, confirm, cancel);
        };

        bus.on('hideContext', this.hideContext);
        if (user.getPanel() === 'true') {
            bus.on('showContext', this.showContext);
        }
    },
    destroyed() {
        shortcut.destroy();
        bus.off('hideContext', this.hideContext);
        if (user.getPanel() === 'true') {
            bus.on('showContext', this.showContext);
        }
    },
    data() {
        return {
            window: window,
            system: system,
            util: util,
            style: style,
            store: store,
            canvas: store.getCanvas(),
            pageList: store.getPageList(),
            elementList: store.getElementList(),
            currentElementList: store.getCurrentElementList(),
            elementSortList: store.getElementSortList(),
            box: {
                x: -10000,
                y: -10000,
                width: 0,
                height: 0
            },
            menu: {
                x: -10000,
                y: -10000
            },
            shadeVisible: false,
            location: line.getLocation(),
            user: user,
            dropOpts: {
                drop: this.onDrop
            }
        };
    },
    methods: {
        onDrop(scope) {
            if (user.getPanel() === 'true') {
                bus.elementClick(scope, this.toolbarId);
                this.$store.commit('setToolbarId', '');
            }
        },
        // paste(event) {
        //     console.log(event);
        //     // 获取解析 粘贴的文本
        //     let text = (event.clipboardData || window.clipboardData ).getData ('text');
        //     let arrtext = text.split (/[(\r\n)\r\n]+/); // 以转行符切割文本字符串
        //     let arr = []
        //     arrtext.forEach((item,index) => {
        //         if (!item ){
        //             snsArr.splice(index, 1); // 去除空值
        //         } else {
        //             arr.push(item)
        //         }
        //     })
        //     console.log(arr)
        // },
        extentMouseDown(e) {
            if (e.button == 2) { // 右键屏蔽
                return
            }
            if (status.isDrawExtent()) {
                store.resetElementFlagMap();
                status.setDrawExtent(false);
                let rectInfo = store.getEditor().getBoundingClientRect();
                let editorX = rectInfo.x;
                let editorY = rectInfo.y;
                let startX = e.clientX;
                let startY = e.clientY;
                // this.box.x = (startX - editorX) / store.getScale();
                // this.box.y = (startY - editorY) / store.getScale();
                this.box.x = (startX - editorX);
                this.box.y = (startY - editorY);
                let _this = this;
                let move = function(e) {
                    // _this.box.width = util.toInteger(Math.abs(e.clientX - startX) / store.getScale());
                    // _this.box.height = util.toInteger(Math.abs(e.clientY - startY) / store.getScale());
                    _this.box.width = util.toInteger(Math.abs(e.clientX - startX));
                    _this.box.height = util.toInteger(Math.abs(e.clientY - startY));
                    if (e.clientX < startX) {
                        // _this.box.x = util.toInteger((e.clientX - editorX) / store.getScale());
                        _this.box.x = util.toInteger((e.clientX - editorX));
                    }
                    if (e.clientY < startY) {
                        // _this.box.y = util.toInteger((e.clientY - editorY) / store.getScale());
                        _this.box.y = util.toInteger((e.clientY - editorY));
                    }
                };
                let up = function(e) {
                    document.removeEventListener('mousemove', move);
                    document.removeEventListener('mouseup', up);
                    let elementList = _this.getSelectElement();
                    store.setCurrentElementList(elementList);
                    _this.hideExtent();
                    status.setDrawExtent(true);
                };
                document.addEventListener('mousemove', move);
                document.addEventListener('mouseup', up);
                this.hideContext();
            }
        },
        hideExtent() {
            this.box.width = 0;
            this.box.height = 0;
            this.box.x = -10000;
            this.box.y = -10000;
        },
        getSelectElement() {
            let result = [];
            for (let i = 0; i < this.elementSortList.length; i++) {
                let element = this.elementSortList[i];
                if (!element.attribute.locked) {
                    if (store.getPageList()[element.attribute.page].visible) {
                        let box = util.getElementBox(element);
                        if (this.box.x / store.getScale() <= box.left && this.box.y / store.getScale() <= box.top && box.right <= (this.box.x + this.box.width) / store.getScale() && box.bottom <= (this.box.y + this.box.height) / store.getScale()) {
                            result.push(element);
                        }
                    }
                }
            }
            return result;
        },
        showContext(e) {
            e.stopPropagation();
            e.preventDefault();
            let editor = store.getEditor();
            let target = e.target;
            let top = e.offsetY;
            let left = e.offsetX;
            while (target) {
                if (!target.parentNode || target == editor) {
                    break;
                } else {
                    if (target.offsetLeft != undefined && target.offsetTop != undefined) {
                        left += target.offsetLeft;
                        top += target.offsetTop;
                    }
                    target = target.parentNode;
                    if (target.id && target.id === `${window.getRootName()}GROUP`) {
                        top -= target.offsetTop;
                    }
                }
            }
            this.menu.x = left;
            this.menu.y = top;
        },
        hideContext() {
            this.menu.x = -10000;
            this.menu.y = -10000;
        },
        getShow(item) {
            let visible = false;
            if (this.pageList[item.attribute.page].visible || item.attribute.visible) {
                visible = true;
            }
            if (this.pageList[item.attribute.page].visible === false) {
                visible = false
            }
            if (item.attribute.visible === false) {
                visible = false;
            }
            return visible
        },
        getIfshow(item) {
            let visible = false;
            if (item.component === 'VHtml') {
                visible = true;
            } else {
                visible = false;
            }
            return !this.preview || !visible;
        }
    }
};
</script>
<style lang="scss" scoped>
.editor {
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff1a;
    // background: $transparent;
    margin: auto;
    transform-origin: 0 0;
}
.horizontal-line {
    position: absolute;
    width: 100%;
    height: 1px;
    background: #ff0000;
    z-index: 1000002;
}
.vertical-line {
    position: absolute;
    height: 100%;
    width: 1px;
    background: #ff0000;
    z-index: 1000002;
}
.select-main-transparent {
    background: #ffffff1b !important;
}
</style>